<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-09-27 17:35:36
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-11-13 14:30:32
 * @FilePath: \hy-ui\src\views\trainingCenter\components\beginExam.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="beginExamBox">
    <div class="goBack" @click="goBack(undefined, '1')">
      <div><img src="../../../assets/images/goBack.png" alt="" />返回</div>
    </div>
    <div class="beginExam">
      <div class="examPaper">{{ clickExamObj.name }}</div>
      <div class="examPagerInfo">
        <div>
          <span>{{ clickExamObj.fraction }}</span>
          <span>考试总分</span>
        </div>
        <div>
          <span>{{ clickExamObj.passFraction }}</span>
          <span>通过分数</span>
        </div>
        <div>
          <span>1 / 0</span>
          <span>考试次数</span>
        </div>
      </div>
      <div class="beginExamBtn">
        <el-button type="primary" @click="handleBeginExam">进入考试</el-button>
      </div>
      <el-divider></el-divider>
      <div class="examRules">
        <p>考试规则</p>
        <p>1.本场考试未开启防作弊功能，请认真参加考试;</p>
        <p>2.进入答题界面开始计时,倒计时结束未自主交卷则系统强制交卷;</p>
      </div>
    </div>
  </div>
</template>

<script>
import { startExamCheck } from "@/api/trainingCenter";
export default {
  props: {
    goBack: {
      type: Function,
      default: () => {},
    },
    clickExamObj: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    async handleBeginExam() {
      const res = await startExamCheck(this.clickExamObj.taskId);
      if (res.code === 200) {
        this.$router.push({
          path: "/exam/testTask/exam",
          query: {
            taskId: this.clickExamObj.taskId,
            testPaperId: this.clickExamObj.testPaperId,
          },
        });
        return;
      }
      return this.$message.error(res.msg);
    },
  },
};
</script>
<style lang="scss" scoped>
.beginExamBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f4f4f4;
  padding: 30px 0;
  height: calc(100vh - 135px);
  .goBack {
    font-size: 14px;
    color: #8b8b8b;
    margin: 0 0 15px 0;
    cursor: pointer;
    width:1198px;
    img {
      width: 17px;
      height: 15px;
      margin-right: 6px;
    }
  }
}
.beginExam {
  font-family: Microsoft YaHei;
  font-weight: 400;
  width:1198px;
  background: #ffffff;

  .examPaper {
    padding: 13px 6px;
    text-align: center;
    font-size: 22px;
    color: #000000;
    border-bottom: 1px solid #e2e2e2;
  }
  .examPagerInfo {
    display: flex;
    justify-content: space-around;
    padding: 50px 0 68px 0;
    & > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 24px;
      color: #000000;
      & > span:nth-of-type(2) {
        font-size: 14px;
        color: #666666;
        margin-top: 25px;
      }
    }
  }
  .beginExamBtn {
    text-align: center;
    padding-bottom: 40px;
    ::v-deep .el-button--primary {
      background: #2f54eb;
      border: none;
      width: 180px;
    }
  }
  .examRules {
    font-size: 14px;
    color: #333333;
    padding: 17px 24px;
    & > p:nth-of-type(1) {
      font-size: 16px;
      color: #000000;
      margin-bottom: 28px;
    }
  }
}
</style>